import React,{useState,forwardRef,useImperativeHandle,useEffect,useCallback }  from 'react';
import { 
    Modal,
    View,
    StyleSheet,
    StatusBar,
    Text,
    TouchableOpacity,
    Image,
    Dimensions,
    LayoutAnimation
 }
 from 'react-native';
 import { save } from '../../../utils/Storage';

import icon_arrow from '../../../assets/icon_arrow.png';
import icon_close from '../../../assets/icon_delete.png';
const {width: SCREEN_WIDTH} =  Dimensions.get("window");
type Props = {
    categoryList: Category[];
}

export  interface CategoryModalRef {
    show: ()=> void;
    hide: ()=> void;
}
export default forwardRef((prop:Props, ref)=> {
    const [visible, setVisable] = useState<boolean>(false);
    const {categoryList} =  prop;
    const [myList, setMyList] = useState<Category[]>([]);
    const [otherList, setOtherList] = useState<Category[]>([]);
    const [edit ,setEdit] = useState(false);
    useEffect(()=>{
        let list1 = categoryList.filter(i=>i.isAdd);
        let list2 = categoryList.filter(i=>!i.isAdd);
        setMyList(list1);
        setOtherList(list2);


    },[categoryList]);
    useImperativeHandle(ref, ()=>{
        return {
            show,hide
        }
    })
    const show = ()=>{
        setVisable(true)
    }
    const hide = ()=>{
        setVisable(false);
        setEdit(false);
    }
    const onMyItemPress = useCallback((item:Category, index:number) =>()=>{
     
        if (!edit){
            return;
        }
        const newMyList = myList.filter(i=>i.name !== item.name);
        const  copy = {...item, isAdd: false};
        const newotherList = [...otherList,copy];
        LayoutAnimation.easeInEaseOut();
        setMyList(newMyList);
        setOtherList(newotherList);

},[edit,myList,otherList]);
const onOtherItemPress = useCallback((item:Category, index:number) =>()=>{
    if (!edit){
        return;
    }
    const newotherList = otherList.filter(i=>i.name !== item.name);
    const  copy = {...item, isAdd: true};
    const newMyList = [...myList,copy];
    LayoutAnimation.easeInEaseOut();
    setMyList(newMyList);
    setOtherList(newotherList);

},[edit,myList,otherList]);
    const renderMyList = ()=>{
        return (
            <>
             <View style={styles.row}>
                <Text style={styles.titleTxt}>我的频道</Text>
                <Text style={styles.subtitleTxt}>点击进入频道</Text>
                <TouchableOpacity style={styles.editButton}
                onPress={()=>{
                    setEdit((edit)=>{
                           if (edit){
                                save('categoryList',JSON.stringify([...myList,...otherList]))
                           }
                            return !edit
                    })
                }}  >
                    <Text style={styles.editTxt}>{edit?'完成编辑':'进入编辑'}</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.closeBtn}
                  onPress={()=>{
                    hide();
                  }}
                >
                    <Image style={styles.closeimg} source={icon_arrow}></Image>
                </TouchableOpacity>

            </View>
            <View style={styles.listcontent}>
                    {myList.map((item:Category,index:number)=>{

                        return (
                        <TouchableOpacity style={item.default?styles.itemLayoutDefault:styles.itemLayout}
                        onPress={onMyItemPress(item,index)}  key={`${item.name}`}>
                                <Text style={styles.itemtxt}>{item.name}</Text>
                                {edit && !item.default && <Image style={styles.closeitemimg} source={icon_close} />}
                        </TouchableOpacity>);
                    })}
            </View>
            </>
        );
    }

    const renderOtherList = () => {
        return (
            <>
             <View style={[styles.row,{marginTop: 28}]}>
                <Text style={styles.titleTxt}>推荐频道</Text>
                <Text style={styles.subtitleTxt}>点击添加频道</Text>
            </View>
            <View style={styles.listcontent}>
                    {otherList.map((item:Category,index:number)=>{

                        return (
                        <TouchableOpacity style={styles.itemLayout} key={`${item.name}`} onPress={onOtherItemPress(item, index)}>
                            <Text style={styles.itemtxt}>`+ {item.name}`</Text>
                        </TouchableOpacity>);
                    })}
            </View>
            </>
        );
    }
    return (
        <Modal 
          transparent={true}
          visible={visible}
          statusBarTranslucent={true}
          animationType='fade'
          onRequestClose={hide}>
            <View style={styles.root}>
                <View style={styles.content} >
                        {renderMyList()}
                        {renderOtherList()}
                </View>
                <View style={styles.mask} />

            </View >

        </Modal>
    );

})
const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor:'transparent'
    },
    content: {
        width: '100%',
        paddingBottom: 40,
        backgroundColor: 'white',
        marginTop: 48+ (StatusBar.currentHeight || 0)
    },
    mask: {
        width: '100%',
        flex: 1,
        backgroundColor: '#00000060'
    },
    row: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        
    },
    titleTxt:{
        fontSize: 16,
        color: '#333',
        fontWeight: 'bold',
        marginLeft: 16
    },
    subtitleTxt: {
        fontSize: 12,
        color: '#999',
        flex: 1,
        marginLeft: 12
    },
    editButton: {
        paddingHorizontal: 10,
        height: 28,
        backgroundColor: '#eee',
        borderRadius: 14,
        justifyContent: 'center',
        alignItems: 'center'
    },
    editTxt: {
        fontSize: 13,
        color: '#3050ff',
    },
    closeBtn: {
        padding: 12
    },
    closeimg: {
        width: 16,
        height: 16,
        resizeMode: 'center',
        transform: [{'rotate': '90deg'}]
    },
    listcontent: {
        width: '100%',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    itemLayout: {
        width: (SCREEN_WIDTH -80)/4,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#eee',
        borderRadius: 6,
        marginLeft: 16,
        marginTop: 12
    },
    itemLayoutDefault: {
        width: (SCREEN_WIDTH -80)/4,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#eee',
        borderRadius: 6,
        marginLeft: 16,
        marginTop: 12
    },
    itemtxt: {
        fontSize: 16,
        color: '#666'
    },
    closeitemimg: {
        width: 16,
        height: 16,
        resizeMode: 'contain',
        position: 'absolute',
        top: -6,
        right: -6
    }
})